<template>
  <div style="margin-left: 10px">
    <el-button type="text">我的表单</el-button>
    <el-button @click="crForm" type="danger" style="margin-left: 90%"
      >创建表单</el-button
    >
    <el-table
      :data="tableForm"
      border
      row-key="name"
      max-height="500px"
      style="width: 100%"
    >
      <el-table-column label="序号" width="80">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="formName"
        label="表单名称"
        width="180"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      />
      <el-table-column
        prop="userName"
        label="创建者"
        width="180"
        align="center"
      />
      <el-table-column
        prop="lastUpdateUser"
        label="最近更新者"
        width="180"
        align="center"
      />
      <el-table-column
        prop="updateTime"
        label="更新日期"
        width="180"
        align="center"
      />
      <el-table-column label="使用状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.isUse == 1">使用中</el-tag>
          <el-tag type="danger" v-if="scope.row.isUse == 0">未使用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="postIndex(scope.row)">修改</el-button>
          <el-button @click="changeUseform(scope.row)">使用表单</el-button>
          <el-button type="danger" @click="delForm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改字段名称 -->
    <el-dialog
      v-model="changeDiavissable"
      title="修改名称"
      width="800"
      :before-close="handleClose"
    >
      <el-button type="danger" @click="handleSort" plain>{{
        !isSort ? '开始排序' : '关闭排序'
      }}</el-button>
      <el-button @click="updateForm">保存</el-button>
      <el-table
        :data="form.itemList"
        row-key="name"
        max-height="750px"
        style="width: 100%"
      >
        <el-table-column prop="position" label="序号" width="180" />
        <el-table-column prop="labelName" label="菜单名称" />
        <el-table-column label="是否必填">
          <template #default="scope">
            <span v-if="scope.row.required == true" style="color: red"
              >必填</span
            >
            <span v-if="scope.row.required == false" style="color: greenyellow"
              >非必填</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              :type="scope.row.isShow === 1 ? 'danger' : 'success'"
              @click="handleHide(scope.$index, scope.row)"
            >
              <span v-if="scope.row.isShow === 1">隐藏</span>
              <span v-else>显示</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="mt-4" style="width: 100%" @click="onAddItem">
        增加字段
      </el-button>
    </el-dialog>

    <!-- 修改创建表单字段名称 -->
    <el-dialog
      v-model="dialogVisible"
      title="修改名称"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        :model="createForm.itemList"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="菜单名称">
          <el-input v-model="createForm.itemList[indexNumber].labelName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 创建表单 -->
    <el-dialog v-model="CreatedialogVisible" title="自定义表单格式">
      <el-button type="danger" @click="handleSort" plain>{{
        !isSort ? '开始排序' : '关闭排序'
      }}</el-button>
      <el-table
        :data="createForm.itemList"
        style="width: 100%"
        row-key="labelName"
        ref="tableRef"
        class="draggable-table"
        @row-drop="handleRowDrop"
      >
        <el-table-column prop="position" label="序号" width="80" />
        <el-table-column prop="labelName" label="菜单名称" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              :type="scope.row.isShow === 1 ? 'danger' : 'success'"
              @click="handleHide(scope.$index, scope.row)"
            >
              <span v-if="scope.row.isShow === 1">隐藏</span>
              <span v-else>显示</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        class="mt-4"
        style="width: 100%"
        @click="onAddcreateItem"
        :disabled="index == 5"
      >
        增加字段
      </el-button>
      <el-button
        @click="nameDialogVisible = true"
        type="danger"
        style="margin-left: 80%; margin-top: 20px"
        >保存</el-button
      >
    </el-dialog>
    <el-dialog
      v-model="nameDialogVisible"
      title="输入表单名称"
      align-center
      width="400px"
    >
      <el-form :model="createForm">
        <el-form-item label="请输入表单名称">
          <el-input v-model="createForm.formName"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="saveIndexForm">确定</el-button>
    </el-dialog>

    <el-dialog v-model="makesureDel" title="确认删除" width="500">
      <span style="margin-left: 50px"
        >删除后不能恢复，您确定要删除<span style="color: aquamarine">{{
          deleFormName
        }}</span
        >表单吗？</span
      >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="makesureDel = false">取消</el-button>
          <el-button type="primary" @click="suredeleteForm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { enableRowDrop } from '@/utils/sortable'
import {
  getIndexForm,
  saveForm,
  uodateIndexForm,
  getIndexFor,
  changeUserform,
  deleteForm,
  getdefaultList
} from '@/api/repairList.js'
import { ElMessage } from 'element-plus'
// import Sortable from 'sortablejs'
const dialogVisible = ref(false)
const nameDialogVisible = ref(false)

const CreatedialogVisible = ref(false)
const indexNumber = ref()
const handleEdit = (index, row) => {
  indexNumber.value = index
  dialogVisible.value = true
}
const handleHide = (index, row) => {
  if (row.isShow == 0) {
    row.isShow = 1
  } else {
    row.isShow = 0
  }
}
const saveIndexForm = async () => {
  const res = await saveForm(createForm.value)
  if (res.code == 200) {
    ElMessage({
      message: '修改成功',
      type: 'success'
    })
    nameDialogVisible.value = false
    CreatedialogVisible.value = false
  } else {
    {
      ElMessage({
        message: '未知错误，请联系管理员',
        type: 'error'
      })
    }
  }
}
// const handleRowDrop = (row, dropRow, column, event) => {
//   //拖拽功能实现
//   const dragIndex = row.rowIndex
//   const dropIndex = dropRow.rowIndex
//   if (dragIndex > dropIndex) {
//     createForm.value.itemList.splice(
//       dropIndex,
//       0,
//       createForm.value.itemList[dragIndex]
//     )
//     createForm.value.itemList.splice(dragIndex + 1, 1)
//   } else {
//     createForm.value.itemList.splice(
//       dropIndex + 1,
//       0,
//       createForm.value.itemList[dragIndex]
//     )
//     createForm.value.itemList.splice(dragIndex, 1)
//   }
// }
const createForm = ref({
  formName: '',
  itemList: []
})
const getEquipdefault = async () => {
  const res = await getdefaultList()
  createForm.value.itemList = res.data
  console.log(createForm.value)
}
const tableForm = ref([])
const changeDiavissable = ref(false)
const form = ref({
  formId: '',
  itemList: []
})
const postIndex = async (index) => {
  changeDiavissable.value = true
  const params = { formId: index.formId }
  const res = await getIndexForm(params)
  form.value.itemList = res.data.itemList
  form.value.formId = res.data.formId
  console.log(res, updataIndexForm.value, updataIndexForm1.value)

  updataIndexForm.value.formId = updataIndexForm1.value.formId
  updataIndexForm.value.itemList = updataIndexForm1.value.itemList

  updataIndexForm.value.formId = res.data.formId
  updataIndexForm.value.itemList = updataIndexForm.value.itemList.filter(
    (item) => !res.data.itemList.some((item1) => item.params === item1.params)
  )
  updataIndexForm.value.itemList = updataIndexForm.value.itemList.splice(0, 1)
}
const updataIndexForm = ref({
  formId: '',
  itemList: []
})
const updataIndexForm1 = ref({
  formId: '',
  itemList: [
    {
      labelName: '自定义字段1',
      params: 'customOne',
      inputType: 'text',
      options: '',
      required: true,
      defaultValue: '',
      position: '11',
      isShow: 0
    },
    {
      labelName: '自定义字段2',
      params: 'customTwo',
      inputType: 'text',
      options: '',
      required: true,
      defaultValue: '',
      position: '12',
      isShow: 0
    },
    {
      labelName: '自定义字段3',
      params: 'customThree',
      inputType: 'text',
      options: '',
      required: true,
      defaultValue: '',
      position: '13',
      isShow: 0
    },
    {
      labelName: '自定义字段4',
      params: 'customFour',
      inputType: 'text',
      options: '',
      required: true,
      defaultValue: '',
      position: '14',
      isShow: 0
    },
    {
      labelName: '自定义片段5',
      params: 'customFive',
      inputType: 'text',
      options: '',
      required: true,
      defaultValue: '',
      position: '15',
      isShow: 0
    }
  ]
})

const onAddItem = async () => {
  updataIndexForm.value.itemList = updataIndexForm1.value.itemList

  updataIndexForm.value.itemList = updataIndexForm.value.itemList.filter(
    (item) => !form.value.itemList.some((item1) => item.params === item1.params)
  )
  updataIndexForm.value.itemList = updataIndexForm.value.itemList.splice(0, 1)
  form.value.itemList.push(updataIndexForm.value.itemList[0])
}
const index = ref(0)
const onAddcreateItem = () => {
  console.log(index.value)
  createForm.value.itemList.push(updataIndexForm1.value.itemList[index.value])
  index.value = index.value + 1
  if (index.value >= 5) {
    ElMessage({
      message: '已经添加5个了，不能继续添加了哦',
      type: 'success'
    })
  }
}
const tablePage = ref({
  pageName: '',
  pageSize: '10'
})
const getyableForm = async () => {
  const res = await getIndexFor(tablePage.value)
  tableForm.value = res.data.list
}
const updateForm = async () => {
  const res = await uodateIndexForm(form.value)
  console.log(res)
}
const changeUseform = async (row) => {
  //切换使用表单
  const data = {
    formId: row.formId,
    isUse: 1
  }
  const res = await changeUserform(data)
  console.log(res)
}
const makesureDel = ref(false)
const deleForm = ref([])
const deleFormName = ref()
const delForm = async (row) => {
  deleForm.value.push(row.formId)
  deleFormName.value = row.formName
  makesureDel.value = true
}
const suredeleteForm = async () => {
  console.log(deleForm.value)
  const res = await deleteForm(deleForm.value)
  if (res.code == 200) {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    makesureDel.value = false
  }
}
const crForm = () => {
  CreatedialogVisible.value = true
  nextTick(() => {
    isSort.value = true
    enableRowDrop(getList, isSort.value, tableRef)
  })
}
// 定义排序
const isSort = ref(false)
const getList = (evt) => {
  console.log(evt.oldIndex, 'evt')
  console.log('请求数据')
}
const tableRef = ref()
const handleSort = async () => {
  isSort.value = !isSort.value

  enableRowDrop(getList, isSort.value, tableRef, createForm.value.itemList)
}
onMounted(() => {
  getyableForm()
  getEquipdefault()
})
</script>
